<template>
  <div id="history">
    <Head />
    <H1 style="margin-left: 305px"
      ><i class="iconfont icon-shoucang1" style="font-size: 33px"></i>
      我的收藏</H1
    >
    <template>
  <div class="favorites_list">
    <div class="favorite_item" v-for="item in responseAll" :key="item.id">
      <!-- 左侧图片 -->
      <div class="image_container">
        <img
          referrerpolicy="no-referrer"
          :src="item.coverImage"
          class="cover_image"
          @click="selectDetail(item.id)"
        />
      </div>

      <!-- 右侧内容 -->
      <div class="content">
        <div class="title" :title="item.title">
          {{ item.title }}
        </div>
        <div class="description" :title="item.description">
          {{ item.description }}
        </div>
        <div class="details">
          <span class="icon"><i class="el-icon-user-solid"></i></span>
          <span @click="routerUser(1)" class="user">说了一半的话</span>
          <span class="time">{{ item.createTime }}</span>
        </div>
        <div class="delete" @click="deleteHistory(item.id)">移除</div>
      </div>
    </div>
  </div>
</template>
  </div>
</template>
      
      <script>
import { onMounted } from "vue";
import Head from "@/components/head.vue";
export default {
  name: "history",
  components: {
    Head,
  },
  data() {
    return {
      responseAll: [],
      pageNum: 1, // 当前页码
      isLoading: false, // 是否正在加载数据
    };
  },
  methods: {
    // 获取全部商品
    getAllProduct() {
      let url = "/api/resources/collect/list";
      this.$http.get(url).then((res) => {
        this.responseAll = res.data.data;
        console.log(res.data.data);
      });
    },
    // 跳转到商品详情页
    selectDetail(id) {
      this.$router.push({
        path: "/play",
        query: {
          resourcesId: id,
        },
      });
      //添加到历史记录
      let url = "/api/resources/views/insert";
      this.$http.post(url, { resourcesId: id }).then((res) => {
        if (res.data.code === 200) {
          console.log("添加成功");
        } else {
          console.log("添加失败");
        }
      });
    },
    // 移除历史记录
    deleteHistory(id) {
      //  提示删除信息
      this.$confirm("是否删除该历史记录", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 确认删除
          let url = "/api/resources/collect/delete/" + id;
          this.$http.delete(url).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                type: "success",
                message: "删除成功",
              });
              this.getAllProduct();
            } else {
              this.$message({
                type: "error",
                message: "删除失败",
              });
            }
          });
        })
        .catch(() => {
          // 取消删除
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.getAllProduct();
  },
};
</script>
      
      <style lang="less" scoped>
#history {
  .favorites_list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 900px;
  margin: auto;
}

.favorite_item {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}

.favorite_item:hover {
  transform: scale(1.02);
}

.image_container {
  flex: 0 0 120px;
  margin-right: 15px;
}

.cover_image {
  width: 120px;
  height: 90px;
  border-radius: 8px;
  cursor: pointer;
  object-fit: cover;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.title {
  font-size: 16px;
  font-weight: 600;
  color: #11192d;
  max-height: 48px;
  line-height: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.description {
  font-size: 14px;
  color: #8a8a8a;
  max-height: 36px;
  line-height: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.details {
  font-size: 14px;
  color: #8a8a8a;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 5px;
}

.icon {
  color: #888;
}

.user {
  cursor: pointer;
  color: #3776da;
}

.user:hover {
  text-decoration: underline;
}

.time {
  color: #666;
}

.delete {
  font-size: 14px;
  cursor: pointer;
  color: red;
  margin-top: 5px;
}

.delete:hover {
  text-decoration: underline;
}
}
/deep/ .head_center {
  display: none;
}
/deep/ .header {
  height: 50px;
}
</style>